<!--conf
<sample>
              <product version="2.6" edition="std"/>
                     <modifications>
                            <modified date="100609"/>
                     </modifications>
               </sample>
 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Scales and grouping</title>
	
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	
    <script src="../common/companies.js"></script>
	
	<script>
	var barChart;
	window.onload = function(){
		 barChart =  new dhtmlXChart({
			view:"bar",
			container:"chart_container",
	    	value:"#sales#",
			preset: "alpha",
			yAxis:{
			},
			xAxis:{
				template:"#id#"
			},
			label:"#sales#",
			sort:{
				by:"#id#",
				as:"string",
				dir:"asc"
			},
			group:{
				by:"#year#",
				map:{
					sales:["#sales#","sum"]
				}
			}
		})
		barChart.parse(data,"json");
	}

	function  groupA(){
		
		barChart.group({
			by:"#company#",
			map:{
				sales:["#sales#","sum"]
			}
		});
		
	}	
	
	function  groupB(){
		barChart.group({
			by:"#year#",
			map:{
				sales:["#sales#","sum"]
			}
		});
	}	
	
	function  groupC(){
		barChart.group({
			by:"#year#",
			map:{
				sales:["#sales#","max"]
			}
		});
	}
	
	function sort(direction){
		
		barChart.define("sort",{
			by:"#sales#",
			dir:direction,
			as:"int"
		});
		barChart.render();
	}
	</script>
</head>
<body>
	<p>To update configuration properties after grouping you need to call define() method with new settings.</p>
	<div id="chart_container" style="width:600px;height:250px;border:1px solid #A4BED4;"></div>
	<br/>
	<input type="button" name="some_name" value="Group by" onclick="window['group'+document.getElementById('groupby').value]()">
	<select name="groupby" id="groupby">
		<option value="A">company</option>
		<option value="B" SELECTED>year (total sales)</option>
		<option value="C">year (max sales)</option>
	</select>
	<br/><br/>
	<input type="button" name="some_name" value="Sort by sales" onclick="sort(document.getElementById('dir').value)">
	<select name="dir" id="dir">
		<option value="asc" selected>asc</option>
		<option value="desc" >desc</option>
	</select>
	
</body>
</html>
